<template>
<view class="container pageBg2" >
		<custom-nav-bar></custom-nav-bar>
		<view class="fill" :style="{height:navBarHeight() + 'px'}">
			
		</view>
		<view class="content">	
			<scroll-view scroll-x="true" class="study_notes">
				<view class="study_item" @click="toAssay">
					<image src="../../static/images/assay.png" mode="aspectFit"></image>
					<view class="icon">学情分析</view>
				</view>
				<view class="study_item" @click="toCourseNote">
					<image src="../../static/images/wodebiji.png" mode="aspectFit"></image>
					<view class="icon">课程笔记</view>
				</view>
				<view class="study_item" @click="toHomework">
					<image src="../../static/images/ziyuan.png" mode="aspectFit"></image>
					<view class="icon">章节作业</view>
				</view>
				<view class="study_item" @click="toStudyPath">
					<image src="../../static/images/meiriqiandao.png" mode="aspectFit"></image>
					<view class="icon">学习路线</view>
				</view>
				<view class="study_item" @click="toHistory">
					<image src="../../static/images/history.png" mode="aspectFit"></image>
					<view class="icon">历史课程</view>
				</view>
			</scroll-view>
		</view>
		<view class="personalCourse">
			<view class="left">
				个人课程
			</view>
			<view class="right">
				...
			</view>
		</view>
			
		<scroll-view  scroll-y="true" style="height: 70vh;overflow-x: hidden;">
			<course @click="toCourse(course.courseId,course.courseName)" v-if="hasCourse" v-for="course in courseList" :key="course.courseId" :courseInfo="course"></course>
			<l-empty image="order" description="未添加个人课程" v-else />
			
		</scroll-view>
		
		<view class="safe-area-inset-bottom">
			
		</view>
		
	</view>
</template>

<script setup>
	import { nextTick, ref } from 'vue'
	import apis from '../../api/apis.js'
	import {onReady,onShow} from '@dcloudio/uni-app'
	import { statusBarHeight,TitleBarHeight, navBarHeight ,tabBarHeight} from '../../utils/system.js'
	onShow(()=>{
		nextTick(()=>{
			getUserCourse()
		})
	})
	const hasCourse = ref(true)
	// 获取个人课程
	const courseList = ref([])
	const getUserCourse = async()=> {
		let res = await apis.getUserCourse().then((res)=>{
			courseList.value = res.data
			if(res.data.length === 0){
				hasCourse.value = false
			}else{
				hasCourse.value = true
			}
		 }).catch(err=>{
			 hasCourse.value = false
		 })
	}
	// console.log(hasCourse.value)
	const toAssay = ()=>{
		uni.navigateTo({
			url:'/pages/assay/assay'
		})
	}
	const toHistory = ()=>{
		uni.navigateTo({
			url:'/pages/history/history'
		})
	}
	const toCourseNote = ()=>{
		uni.navigateTo({
			url:"/pages/courseNote/courseNote"
		})
	}
	const toHomework = ()=>{
		uni.navigateTo({
			url:'/pages/homework/homework'
		})
	}
	const toCourse = (id,name)=>{
		uni.navigateTo({
			url: "/pages/video/video?id=" + id +"&name=" + name
		})
	}
	const toStudyPath = ()=>{
		uni.navigateTo({
			url:'/pages/studyPath/studyPath'
		})
	}
</script>

<style lang="scss" scoped>	  
 page{
	 /* #ifndef APP */
	     padding-bottom: calc(env(safe-area-inset-bottom) - 40rpx);
	     /* #endif */
	  
	     /* #ifndef H5 */
	     padding-bottom: var(--window-bottom);
	     /* #endif */
	 
 }
	    .content{
	    	padding: 0rpx 30rpx;
	    }

	    .study_notes{
	    	margin-top: 20rpx;
	    	width: 100%;
	    	height: 150rpx;
	    	background-color: white;
	    	border-radius:20rpx;
	    	padding: 20rpx;
	    	box-sizing: border-box;
	    }
	    // .study_notes{
	    // 	display: flex;
	    // 	justify-content: space-between;
	    // }
	    // .study_notes image{
	    // 	width: 55rpx;
	    // 	height: 55rpx;
	    // }
		.study_notes {
		  white-space: nowrap; // 确保内容不换行
		  overflow-x: auto; // 确保水平滚动
		  // padding-bottom: 10px; // 避免滚动条遮挡内容
		  padding-left: 30rpx;
		  ::-webkit-scrollbar {
		  	width: 0 !important;
		  	/* 隐藏水平滚动条 */
		  	height: 0 !important;
		  	/* 隐藏垂直滚动条 */
		  }
		}
		.study_item {
		  display: inline-block;
		  margin-right: 80rpx;
		  cursor: pointer;
		  text-align: center;
		  image {
		    width: 55rpx;
		    height: 55rpx;
		  }
		
		  .icon {
	    	font-size: 24rpx;
		    margin-top: 5px;
		    text-align: center;
		  }
		}
	    .study_item:last-child{
			margin-right: 10rpx;
		}
	    .collet,
	    .buy,
	    .lately_study,
	    .download{
	    	display: flex;
	    	justify-content: space-between;
	    }
		.personalCourse{
			margin-top: 35rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				font-size: 35rpx;
				font-weight: 600;
			}
		}
</style>
